{% extends "../../base.html" %}

{% block css %}
<style>
	/*The pop-up window for upload files*/
	#upload {
	    display: none;
	    width: 400px;
	    height: 250px;
	    border: 1px solid #c0c0c0;
	    background: #ffffff;
	    position: absolute;
	    left: 25%;
	    top: 25%;
	}
	/*The title style of pop-up window*/
	.title {
	    background: #f1f1f1;
	    color: #000000;
	    height: 30px;
	    line-height: 30px;
	    padding-left: 10px;
	    font-weight: bold;
	}
	
	.body {
	    color: #828282;
	    height: 30px;
	    line-height: 30px;
	    padding-left: 10px;
	}
	
	#cancle {
	    margin-left: 220px;	
	    margin-top: 120px;	
	    background: #f7f7f7;
	    color: #000000;
	    border: 1px solid #c0c0c0;
	    width: 60px;
	    height: 30px;
	}
	
	#save {
	    margin-left: 26px;
	    background: #1dc5a3;
	    color: #ffffff;
	    border: none;
	    width: 60px;
	    height: 30px;
	}
</style>
{% endblock %}

{% block crumbs %}
    <div class="row">
        <div class="col-md-12">
            <ol class="breadcrumb">
                <li class="active">
                    <a class="this">Project</a>
                </li>
	            <li class="active">
	                <a class="this-page" href="/atp4p/project/">Test project</a>
	            </li>
	            <li class="active">
	                <a class="this">{{ project }}</a>
	            </li>
            </ol>
        </div>
    </div>
{% endblock %}

{% block body %}
<div class="row">
	<div class="col-md-12">
    	<div class="panel">
            <div class="panel-heading">
            	<form>
	            	<div class="btn btn-primary" style="display :inline; margin-right: 20px" id="div_add">
	            		<span>Upload</span>
	            	</div>
		            <div class="btn btn-primary" style="display :inline; margin-right: 20px" onclick="dload('/atp4p/file/download/?id=')">
			        	<span>Download</span>
				    </div>
				    <div class="btn btn-primary" style="display :inline; margin-right: 20px" onclick="sync()">
			        	<span>Sync</span>
			        </div>
			        <div class="btn btn-warning" style="display:inline;" onclick="del()">
			        	<span>Delete</span>
			        </div>
		        </form>
		    </div>
            <div class="panel-body" id="append">
            	<table class="table table-bordered">
                	<thead>
                    <tr>
                    	<th width="6%"><input type="checkbox" id="box" onclick="checkAll()" value=""></th>
                    	<th width="8%">ID</th>
                        <th>File Name</th>
                        <th>Path</th>
                        <th width="15%">Created Date</th>
                        <th width="13%">Operation</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for file in file_list %}
                        <tr>
                        	<td><input type="checkbox" aria-hidden="false" value="{{ file.id }}" onclick="check()" name="checkOne"></td>
                        	<td>{{ file.id }}</td>
                            <td>{{ file.file_name }}</td>
                            <td>{{ file.path }}</td>
                            <td>{{ file.upload_time|date:"Y-m-d H:i:s" }}</td>
                            <td>
                                <a href="/atp4p/file/download/?id={{ file.id }}">DL</a>
                                <a href="#" style="color: green" onClick="split({{ file.id }})">Split</a>
                                <a href="#" style="color: red" onClick="del({{ file.id }})">UL</a>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <!--The widow of add files-->
            <form id="upload" enctype="multipart/form-data">
            	<p class="title">Upload files</p>
            	<div class="">
            		<p class="body">
						Please select the file：<input type="file" multiple="multiple" name="file"/>
					</p>
	            	<input type="button" value="Cancel" id="cancle" /> <input type="button" value="Submit" id="save"/>
	            </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block javascript %}
<script type="text/javascript">
    $("#div_add").click(function() {
        $('#upload').show();
    });

    $("#cancle").click(function() {
        $('#upload').hide();
    });
    
    $("#save").click(function() {
        $('#upload').hide();
        var formData = new FormData($("#upload")[0]);
        $.ajax({
			type: 'POST',
			url: "/atp4p/file/upload/?project={{ project }}",
			data: formData,
			processData: false,
            contentType: false,
			success: function(data){
				alert("Upload successfully!")
				document.getElementById("upload").reset()
				window.location.href="/atp4p/file/?project={{ project }}";
			},
			error: function(response){
				console.log(response)
			}
		});
    });
</script>

<script>
    function del(id){
    	if (id === undefined){
    		id = new Array();
	    	var checkOnes = document.getElementsByName("checkOne");
	    	if(checkOnes.length>0){
    	    	for(var i=0;i<checkOnes.length;i++){
        	    	if(checkOnes[i].checked){
            			id.push(checkOnes[i].value);
            		}
        		}
			}
			id = id.toString();
		}
		var url = `/atp4p/file/delete/?id=${id}`;
	    $.ajax({
			type: 'GET',
			url: url,
			dataType:'json',
			success: function(data){
				alert("Delete successfully!");
				window.location.href="/atp4p/file/?project={{ project }}";
			},
			error: function(){
				alert("Delete Failure");
			}
		});
    };
	function sync(id){
		if (id === undefined){
    		id = new Array();
	    	var checkOnes = document.getElementsByName("checkOne");
	    	if(checkOnes.length>0){
    	    	for(var i=0;i<checkOnes.length;i++){
        	    	if(checkOnes[i].checked){
            			id.push(checkOnes[i].value);
            		}
        		}
			}
			id = id.toString();
		}
		var url = `/atp4p/file/sync/?project={{project}}&id=${id}`;
	    $.ajax({
			type: 'GET',
			url: url,
			dataType:'json',
			success: function(res){
				var code = res.code
				if(code == 0){
					alert("Synchronization successful");
				}else{
					alert("Synchronization failure，"+res.msg);
				}
			},
			error: function(res){
				alert("Synchronization failure，"+res);
			}
		});
    };
    function split(id){
		var url = `/atp4p/file/split/?project={{ project }}&id=${id}`;
	    $.ajax({
			type: 'GET',
			url: url,
			dataType:'json',
			success: function(res){
				var code = res.code
				if(code == 0){
					alert("Split successful");
				}else{
					alert("Split failure，"+res.msg);
				}
			},
			error: function(res){
				alert("Split failure，"+res);
			}
		});
    };
    function dload(path){
    	var id = "";
	    var checkOnes = document.getElementsByName("checkOne");
	    if(checkOnes.length>0){
    	    for(var i=0;i<checkOnes.length;i++){
        	    if(checkOnes[i].checked){
            		id = checkOnes[i].value;
            		url = path + id;
				    const iframe = document.createElement('iframe');
				    iframe.style.display = 'none';
				    iframe.style.height = 0;
				    iframe.src = url;
				    document.body.appendChild(iframe);
				    setTimeout(() => {
				    	iframe.remove()
				    }, 5 * 1000)
            	}
        	}
		}
	}
</script>

{% endblock %}